<template>
	<div>
		<div class="header">
			<img src="../assets/jtz.png" alt="" class="jtz">
			<span class="title_text">选择地址</span>
		</div>
		<div class="list_cotainer">
			<ul class="deliverable_address">
				<li v-for="(item,index) in datas" :key="item.name" @click="xz(item,index)" >
					<i class="icon-span icon-span-select" :class="{'icon-span-select1' : isShow == index ? true : false}"></i>
					<div>
						<header>
							<span>{{item.name}}</span>
							<span> {{item.sex}} </span>
							<span>{{item.phone}}</span>
						</header>
						<div class="address_detail ellipsis">
							<span>{{item.tag}}</span>
							<p>{{item.address_detail}}</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "tjdz",
		data() {
			return {
				isShow: "",
				datas: [],
			}
		},
		created() {
			window.console.log(this.$store.state.user_id )
			let obj = this;
			this.$axios({
				url: 'https://elm.cangdu.org/v1/users/'+obj.$store.state.user_id+'/addresses',
				method: "get",
			}).then(function(res) {
				window.console.log(res.data);
				obj.datas = res.data;
				for (let i = 0; i < obj.datas.length; i++) {
					if (obj.datas[i].sex == 1) {
						obj.datas[i].sex = "先生"
					}else if (obj.datas[i].sex == 2){
						obj.datas[i].sex = "女士"
					}
				// 	if(obj.datas[i].tag_type == 2){
				// 		obj.datas[i].tag_type = "家"
				// 	}else if(obj.datas[i].tag_type == 3){
				// 		obj.datas[i].tag_type = "学校"
				// 	}else if(obj.datas[i].tag_type == 4){
				// 		obj.datas[i].tag_type = "公司"
				// 	}else if(obj.datas[i].tag_type == 1){
				// 		obj.datas[i].tag_type = "无"
				// 	}
				}

			});
		},
		methods:{
			xz(item,index){
				this.isShow = index;
				window.console.log(this.isShow )
				this.$router.push({name:'home',params:{name:item.name,sex:item.sex,phone:item.phone,tag:item.tag,address_detail:item.address_detail}});
			}
		}
	}
</script>

<style scoped>
	.jtz {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 12px;
	}

	.header {
		width: 100%;
		height: 90px;
		background-color: #3190e8;
		position: relative;
	}

	.title_text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		text-align: center;
		font-size: 38px;
		font-weight: 700;
	}

	.list_cotainer {
		padding-bottom: 234px;
	}

	.deliverable_address {
		background-color: #fff;
	}

	.deliverable_address li {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		padding: 33px;
		line-height: 47px;
	}

	.icon-span {
		display: inline-block;
		background-color: #fff;
		border-radius: 100%;
		border: 1px solid #ccc;
		position: relative;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-right: 14px;
	}

	.icon-span::after {
		border: 4px solid transparent;
		border-left: 0;
		border-top: 0;
		content: " ";
		top: 7px;
		left: 14px;
		position: absolute;
		width: 8px;
		height: 16px;
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
		-webkit-transition: -webkit-transform .2s;
		transition: -webkit-transform .2s;
		transition: transform .2s;
		transition: transform .2s, -webkit-transform .2s;
	}

	.icon-span-select {
		background-color: #CCCCCC;
		border-color: #CCCCCC;
	}

	.icon-span-select1 {
		background-color: #4cd964;
		border-color: #4cd964;
	}

	.icon-span-select::after {
		border-color: #fff;
		-webkit-transform: rotate(45deg) scale(1);
		transform: rotate(45deg) scale(1);
	}

	.deliverable_address li header {
		font-size: 33px;
		color: #333;
	}

	.deliverable_address li header span:first-of-type {
		font-size: 37.5px;
		font-weight: 700;
	}

	.deliverable_address li .address_detail {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.deliverable_address li .address_detail span {
		font-size: 24px;
		color: #fff;
		border-radius: 7px;
		background-color: #ff5722;
		height: 28px;
		line-height: 28px;
		padding: 0 9px;
		margin-right: 14px;
	}

	.deliverable_address li .address_detail p {
		font-size: 24px;
		color: #777;
	}
</style>
